<h1>Fonts And Typography</h1>
<p>Trongate CSS uses Tahoma as its default font family, providing excellent readability across all modern browsers without requiring external font downloads.</p>
<h2>Default Font Settings</h2>
[code=css]
body {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 1rem;
  color: #555;
  line-height: 1.5em;
}
[/code]
<div class="alert alert-info">
  <p class="mt-0">Tahoma was chosen because it's a web-safe font that's available on all modern devices, ensuring consistent rendering without loading external resources. It also has excellent readability characteristics and isn't as commonly used as Arial or Verdana, giving your site a distinctive look.</p>
</div>
<h2>Heading Sizes</h2>
<p>Headings are pre-configured with appropriate sizes:</p>

<div class="trongate-css-demo">
  <div>
    <h1 class="h1-default">Default 'h1' element</h1>
    <h2 class="h2-default">Default 'h2' element</h2>
    <h3 class="h3-default">Default 'h3' element</h3>
    <h4 class="h4-default">Default 'h4' element</h4>
  </div>
</div>

[code=html]
&lt;h1 class="h1-default"&gt;Default 'h1' element&lt;/h1&gt;
&lt;h2 class="h2-default"&gt;Default 'h2' element&lt;/h2&gt;
&lt;h3 class="h3-default"&gt;Default 'h3' element&lt;/h3&gt;
&lt;h4 class="h4-default"&gt;Default 'h4' element&lt;/h4&gt;
[/code]
<div class="alert alert-success">
  <p class="mt-0">All font sizes use relative units (em, rem) rather than fixed pixels, ensuring proper scaling across different screen sizes and user preferences.</p>
</div>
<h2>Paragraph Text</h2>
<p>Paragraphs are styled for optimal readability with comfortable line spacing:</p>
<div class="trongate-css-demo">
  <div>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam fuga saepe mollitia officiis labore repudiandae ea rem, eos tenetur dolores sequi ad blanditiis natus, minima commodi vitae odio modi quam.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing, elit. Sunt magni nihil autem doloremque est, facere dolorem culpa voluptatem amet aperiam adipisci consequuntur porro hic libero voluptates odit vel eum perferendis.</p>
  </div>
</div>

[code=html]
&lt;p&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam fuga saepe mollitia officiis labore repudiandae ea rem, eos tenetur dolores sequi ad blanditiis natus, minima commodi vitae odio modi quam.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet consectetur, adipisicing, elit. Sunt magni nihil autem doloremque est, facere dolorem culpa voluptatem amet aperiam adipisci consequuntur porro hic libero voluptates odit vel eum perferendis.&lt;/p&gt;
[/code]

<ul>
  <li>Font color: #555 (easy on the eyes)</li>
  <li>Line height: 1.5em (good spacing between lines)</li>
  <li>Margin bottom: Creates natural spacing between paragraphs</li>
</ul>


<h2>List Styling</h2>
<p>Unordered lists are styled with clear spacing and custom bullets:</p>

<div class="trongate-css-demo">
    <div>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
</div>

[code=html]
&lt;ul&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;
[/code]

<p>Ordered lists are styled in a similar manner with readability as a priority:</p>

<div class="trongate-css-demo">
    <div>
      <ol>
        <li>Apples</li>
        <li>Oranges</li>
        <li>Bananas</li>
      </ol>
    </div>
</div>

[code=html]
&lt;ol&gt;
  &lt;li&gt;Apples&lt;/li&gt;
  &lt;li&gt;Oranges&lt;/li&gt;
  &lt;li&gt;Bananas&lt;/li&gt;
&lt;/ol&gt;
[/code]

<div class="alert alert-info">
  <p class="mt-0">Lists use circle bullets by default and have generous vertical margins to separate them from surrounding content. List items have slightly increased line height for better readability.</p>
</div>
<h3 class="mt-3">Key Features</h3>
<ul>
  <li>Lists have 2em margins top and bottom</li>
  <li>Circle bullets for a clean look</li>
  <li>1.8em line height for comfortable reading</li>
</ul>
<div class="alert alert-success">
  <p class="mt-0">The increased line height on list items (1.8em vs 1.5em for regular text) helps distinguish list content from regular paragraphs.</p>
</div>
<h2>Summary</h2>
<p>That's all there is to it! No complicated font configurations or external dependencies - just clean, readable text that works everywhere. The typography system provides:</p>
<ul>
  <li>Web-safe fonts that load instantly</li>
  <li>Consistent heading hierarchy</li>
  <li>Comfortable reading experience</li>
  <li>Well-spaced lists with distinct styling</li>
  <li>Relative units for better scaling</li>
</ul>